<template>
  <div class="chart-box">
    <el-card class="box-card">
      <div slot="header">
        <h2>{{year}}年{{month}}月实习转正人数一览</h2>
      </div>
      <div class="box-body">
        <el-row class="chart">
          <el-col :span="24">
            <div id="chart" ref="internshipChart"></div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getInternshipData } from "@/api/employee";
export default {
  name: "OperationLog",
  data() {
    return {
      year: undefined,
      month: undefined,
    };
  },
  created() {
    const date = new Date();
    this.year = date.getFullYear();
    this.month = date.getMonth() + 1;
  },
  methods: {
    async getDate() {
      const resultData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
      const resp = await getInternshipData();

      const { data, code } = resp;
      if (code === 200) {
        data.forEach((item) => {
          let month = parseInt(item.month);
          resultData[month - 1] = item.total;
        });
      }
      return resultData;
    },

    async drawChart() {
      const data = await this.getDate();
      const myChart = this.$echarts.init(this.$refs.internshipChart);

      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            // dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["蒸发量", "降水量", "平均温度"],
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: {
          type: "value",
          name: "转正人数",
        },
        // yAxis: [
        //   {
        //     type: "value",
        //     name: "水量",
        //     min: 0,
        //     max: 250,
        //     interval: 50,
        //     axisLabel: {
        //       formatter: "{value} ml",
        //     },
        //   },
        //   {
        //     type: "value",
        //     name: "温度",
        //     min: 0,
        //     max: 25,
        //     interval: 5,
        //     axisLabel: {
        //       formatter: "{value} °C",
        //     },
        //   },
        // ],
        series: [
          {
            name: "转正人数",
            type: "bar",
            data: data,
            itemStyle: {
              normal: {
                // 这里是重点
                color: function (params) {
                  // 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = [
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                    "#DA70D6",
                    "#4B0082",
                    "#ADD8E6",
                    "#7FFFAA",
                    "#ADFF2F",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      };

      myChart.clear();
      myChart.setOption(option);
    },
  },
  mounted() {
    this.drawChart();
  },
};
</script>

<style scoped lang="scss">
.chart-box {
  height: 100%;
}
.box-card {
  height: 100%;
}
.box-body {
  height: 100% !important;
}
.chart {
  height: 100%;
}
/deep/ .el-card__body {
  height: 100% !important;
}
.box-body {
  height: 100%;
}
.el-col {
  height: 100%;
}
#chart {
  height: 100%;
  width: 100%;
}
</style>